import React from 'react';
import '../../style.less';
import './qhhs.less';
import {Spin } from 'antd';
import { Link } from 'react-router';
import superagent from 'superagent';
import echarts from 'echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/theme/dark';
import Draggable from 'react-draggable';

function newline(option, number, axis){
    option[axis]['axisLabel']={
        interval: 0,
        formatter: function(params){
            var newParamsName = "";
            var paramsNameNumber = params.length;
            var provideNumber = number;
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                    } else {
                        tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                }
            } else {
                newParamsName = params;
            }
            return newParamsName
        }
    }
    return option;
}
function max(prev, next) {
    return Math.max(prev, next);
}

function min(prev, next) {
    return Math.min(prev, next);
}

let mapStyle = {height: 900,width: 460};
const position = [31.825, 118.926];


let titleStyle = {
    color: '#00e4ff',
    fontSize: 16
};

let allData;
let myChart,//降雨信息
    pumpChart,//泵站左
    waterChannelChart,//河道水位
    pumpRightChart,//泵站右
    floodPointChart,//积淹点
    floodPointRightChart,//大饼
    waterLevelChart,//长江水位流量
    alertCircleChart,//水库总数饼图
    alertCircleChart1,
    alertCircleChart2,
    alertCircleChart3,
    floodAnaChart,//洪水相似度分析
    reservoirChart;//水库水位

let layerGroup;


//险情信息
let d=new Date();
let nowMonth = d.getMonth() + 1;
nowMonth<10?nowMonth = "0"+nowMonth:1;
let nowDay = d.getFullYear() + "-" + nowMonth + "-" + d.getDate();

function getPreMonth(date) {
    let arr = date.split('-');
    let year = arr[0]; //获取当前日期的年份
    let month = arr[1]; //获取当前日期的月份
    let day = arr[2]; //获取当前日期的日
    let days = new Date(year, month, 0);
    days = days.getDate(); //获取当前日期中月的天数
    let year2 = year;
    let month2 = parseInt(month) - 1;
    if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
    }
    let day2 = day;
    let days2 = new Date(year2, month2, 0);
    days2 = days2.getDate();
    if (day2 > days2) {
        day2 = days2;
    }
    if (month2 < 10) {
        month2 = '0' + month2;
    }
    let t2 = year2 + '-' + month2 + '-' + day2;
    return t2;
}
let preMonth = getPreMonth(nowDay);
let floodColor = ["#ff6535", "#ffaa05", "#447da1", "#424d73"];
class FloodInfo extends React.Component{
    constructor(props) {
        super(props);
        this.state ={
            info: {},
            loading: true
        }
    }
    componentDidMount(){

        //洪水相似度分析
        let resAdd = window.httpAddress+":8080/stdata/getHistoryData/2017-06-9 11:00:00/2017-06-11 11:00:00";
        // let resAdd = "http://10.32.224.49:8080/stdata/getHistoryData/2017-06-9 11:00:00/2017-06-11 11:00:00";
        let self1 = this;
        superagent
            .get(resAdd)
            .end(function (err, res) {
                if(res){
                    let floodAnaDatax = [], floodAnaDatay = [], allFloodData = JSON.parse(res.text).center,newFloodData = [],asFloodData = [] ,topRainData = JSON.parse(res.text).left
                    for(let i in allFloodData){
                        floodAnaDatax.push(i+"最高水位");

                        let floodInside = [];

                        for(let y in allFloodData[i]){
                            floodInside.push({
                                "time": allFloodData[i][y].start_time_h.replace(/:00:00/,"时")+"--"+allFloodData[i][y].end_time_h.replace(/:00:00/,"时"),
                                "level": allFloodData[i][y].MaxZ,
                                "rain": allFloodData[i][y].sumRainData,
                                "point": i
                            });
                        }
                        newFloodData.push(floodInside)
                    }
                    for(let yy in newFloodData[0]){
                        asFloodData[yy] = {"time": newFloodData[0][yy].time}
                    }
                    let putAllData = [];
                    for(let zz in asFloodData){
                        let cc = [],dd = []
                        for(let zzz in newFloodData){
                            putAllData.push(newFloodData[zzz][zz].level)
                            cc.push(newFloodData[zzz][zz].level)
                            dd.push(newFloodData[zzz][zz].rain)
                        }
                        asFloodData[zz].data = cc;
                        asFloodData[zz].rain = dd;
                    }
                    self1.setState({loading: false,info: asFloodData, rainData: topRainData});

                    if(floodAnaChart){

                    }else{

                        floodAnaChart = echarts.init(document.getElementById('floodAna'), 'dark');

                    }
                    for(let x in newFloodData[0]){
                        floodAnaDatay.push(
                            {
                                name: newFloodData[0][x].time,
                                type: 'bar',
                                data: asFloodData[x].data,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                    }
                                },
                                itemStyle:{
                                    normal:{
                                        color: floodColor[x]
                                    }
                                },
                            }
                        )
                    }


                    let floodAnaOption = {
                        title:{

                        },

                        backgroundColor: "transparent",

                        tooltip: {
                            trigger: 'item',
                            formatter: '{a}<br />{b} : {c}'
                        },
                        yAxis : {
                            type : 'value',
                            min: (putAllData.reduce(min)-1).toFixed(1)
                        },
                        xAxis: {
                            data: floodAnaDatax
                        },
                        series: floodAnaDatay
                    }

                    floodAnaChart.setOption(floodAnaOption);



                }
            })
    }

    render(){
        let floodAnaDataTop = [], floodAnaTop1 = [];
        if(Object.keys(this.state.info)){
            for(let i in this.state.info){
                if(i < 4){
                    let nowStyle = {  borderTopColor: floodColor[i]}
                    if(i == 0){
                        floodAnaTop1.push(
                            <div className="textCenter floodAnaDataTop" key={i}>
                                <div className="triangle" style={nowStyle}></div>
                                <div className="triangleText">当前</div>
                                <div className="floodAnaDataTopt">{(this.state.rainData[i].rainData).toFixed(1)}mm</div>
                                <div className="floodAnaDataTopb">{this.state.info[i].time}</div>
                            </div>
                        )
                    }else{
                        floodAnaDataTop.push(
                            <div className="textCenter floodAnaDataTop" key={i}>
                                <div className="triangle" style={nowStyle}></div>
                                <div className="triangleText">{i}</div>
                                <div className="floodAnaDataTopt">{(this.state.rainData[i].rainData).toFixed(1)}mm</div>
                                <div className="floodAnaDataTopb">{this.state.info[i].time}</div>
                            </div>
                        )
                    }




                }
            }
        }

        return(
            <Spin spinning={this.state.loading}>
                <div className="selfTitle">相似水情分析</div>
                <div className="floodInfo">
                    <Link className="anaA" to="/anas">
                        <div className="floodAnaDataTopWrap1">
                            {floodAnaTop1}
                        </div>
                        <div className="clearfix floodAnaDataTopWrap">
                            {floodAnaDataTop}
                        </div>
                    </Link>
                    <div id="floodAna"></div>
                </div>
            </Spin>
        )
    }

}



function getData(obj,map) {
    let getAllPos = JSON.parse(localStorage.getItem('allPos1'))

    for(let pos in getAllPos){
        if(getAllPos[pos].left){
            document.getElementById(pos).style.left = getAllPos[pos].left+"px";
            document.getElementById(pos).style.top = getAllPos[pos].top+"px";
        }
    }
    superagent
        .get(window.httpAddress+'/njfx/getQinhuaiData!FLOOD')
        .query({tm: '2017-06-11 11:00:00'})
        .end(function (err,res) {
            allData = JSON.parse(res.text)

            if(layerGroup){
                layerGroup.clearLayers();
            }else{
                layerGroup = L.layerGroup({});
            }


            let marker1,marker2,marker3,marker4
            //显示警戒
            let warnPoint = allData.alert;
            //雨量
            if(warnPoint.rain.rain.length){
                for(let w1 in warnPoint.rain.rain){
                    marker1 = L.marker([warnPoint.rain.rain[w1].latd,warnPoint.rain.rain[w1].lgtd], {icon: icon1}).bindPopup(warnPoint.rain.rain[w1].stnm+': '+warnPoint.rain.rain[w1].value);
                    layerGroup.addLayer(marker1).addTo(map);
                }
            }
            //河道
            if(warnPoint.river.river.length){
                for(let w2 in warnPoint.river.river){
                    marker2 = L.marker([warnPoint.river.river[w2].latd,warnPoint.river.river[w2].lgtd], {icon: icon2}).bindPopup(warnPoint.river.river[w2].stnm+': '+warnPoint.river.river[w2].value);
                    layerGroup.addLayer(marker2).addTo(map);
                }
            }
            //水库
            if(warnPoint.rsvr.mRsvr.length){
                for(let w3 in warnPoint.rsvr.mRsvr){
                    marker3 = L.marker([warnPoint.rsvr.mRsvr[w3].latd,warnPoint.rsvr.mRsvr[w3].lgtd], {icon: icon3}).bindPopup(warnPoint.rsvr.mRsvr[w3].stnm+': '+warnPoint.rsvr.mRsvr[w3].value);
                    layerGroup.addLayer(marker3).addTo(map);
                }
            }
            //积水
            if(warnPoint.flood.flood.length){
                for(let w4 in warnPoint.flood.flood){
                    marker4 = L.marker([warnPoint.flood.flood[w4].latd,warnPoint.flood.flood[w4].lgtd], {icon: icon4}).bindPopup(warnPoint.flood.flood[w4].stnm+': '+warnPoint.flood.flood[w4].value);
                    layerGroup.addLayer(marker4).addTo(map);
                }
            }


            obj.setState({loading:false,isoData: allData.img,channelData: allData.impRiver,emergency: allData.response,weather: allData.weather,njRain: allData.njRain})
            if(pumpRightChart){

            }else{
                //降雨信息
                // myChart = echarts.init(document.getElementById('rain'), 'dark');
                //机泵流量统计
                // pumpChart = echarts.init(document.getElementById('pump'), 'dark');
                pumpRightChart = echarts.init(document.getElementById('pumpRight'), 'dark');
                //河道水位
                waterChannelChart = echarts.init(document.getElementById('waterChannel'), 'dark');
                //积淹点
                floodPointChart = echarts.init(document.getElementById('floodPoint'), 'dark');
                //积淹点大饼
                floodPointRightChart = echarts.init(document.getElementById('floodPointRight'), 'dark');
                //长江水位流量
                waterLevelChart = echarts.init(document.getElementById('waterLevel'), 'dark');
                //水库水位
                reservoirChart = echarts.init(document.getElementById('reservoir'), 'dark');
                //水库总数饼图
                alertCircleChart = echarts.init(document.getElementById('alertCircle'), 'dark');
                alertCircleChart1 = echarts.init(document.getElementById('alertCircle1'), 'dark');
                alertCircleChart2 = echarts.init(document.getElementById('alertCircle2'), 'dark');
                alertCircleChart3 = echarts.init(document.getElementById('alertCircle3'), 'dark');


            }
            //降雨信息
            // let rainYData = [], rainXData = [], rainMostData = [], rainMarkPoint = [],nowDistRrain = allData.distRain.reverse()
            // for(let i in nowDistRrain){
            //     let rainArea = nowDistRrain[i].CITY.replace(/区/,"");
            //     rainYData.push(rainArea);
            //     rainXData.push(nowDistRrain[i].VALUE);
            //     rainMostData.push(nowDistRrain[i].maxValue);
            //     if(nowDistRrain[i].maxValue > 0){
            //         rainMarkPoint.push({name: nowDistRrain[i].VALUE,value: allData.distRain[i].maxSta.substring(0,2),coord:[allData.distRain[i].maxValue,Number(i)]})
            //     }
            // }
            // let myOption = {
            //     title: {
            //         text: '县市区降雨',
            //         left: 'center',
            //         textStyle: titleStyle
            //     },
            //     backgroundColor: "transparent",
            //     legend: {
            //         bottom: '0',
            //         data: ['3日面平均雨量', '最大降雨点']
            //     },
            //     tooltip: {
            //         trigger: 'item',
            //         formatter: '{a} <br/>{b} : {c}'
            //     },
            //     xAxis: {
            //         name:"(mm)",
            //         type: 'value',
            //         boundaryGap: ['0', '20%']
            //     },
            //     yAxis: {
            //         name: "县区(名称)",
            //         data: rainYData
            //     },
            //     series: [
            //         {
            //             name: '3日面平均雨量',
            //             type: 'bar',
            //             data: rainXData,
            //             label: {
            //                 normal: {
            //                     show: true,
            //                     position: 'right',
            //                 }
            //             },
            //             itemStyle:{
            //                 normal:{
            //                     color: "#99ffff"
            //                 }
            //             },
            //         },
            //         {
            //             name: '最大降雨点',
            //             type: 'bar',
            //             data: rainMostData,
            //             label: {
            //                 normal: {
            //                     show: true,
            //                     position: 'right'
            //                 }
            //             },
            //             itemStyle:{
            //                 normal:{
            //                     color: "#4d7dff"
            //                 }
            //             },
            //             markPoint : {
            //                 symbolRotate: 270,
            //                 symbolSize: 50,
            //                 symbolOffset: [24,0],
            //                 label:{
            //                     normal:{
            //                         show: true,
            //                         position: [16,10],
            //                         formatter: '{c}'
            //                     }
            //
            //                 },
            //                 data : rainMarkPoint
            //             },
            //         }
            //     ]
            // }
            // myChart.setOption(myOption);

            //机泵流量统计
            let pumpData = allData.gq;
            // let pumpOption = {
            //     backgroundColor: '',
            //     title: {
            //         text: "实时流量 "+pumpData[0].aFlow+"m³/s",
            //         left: 'center',
            //         textStyle: titleStyle
            //     },
            //     tooltip : {
            //         formatter: "{a} <br/>{b} : {c}台"
            //     },
            //     series: [
            //         {
            //             radius: 90,
            //             endAngle: 0,
            //             startAngle: 180,
            //             center: ['50%', '90%'],
            //             min: 0,
            //             max: pumpData[0].allCnt,
            //             splitNumber: 3,
            //             name: '启用台数',
            //             type: 'gauge',
            //             axisLine: {            // 坐标轴线
            //                 lineStyle: {       // 属性lineStyle控制线条样式
            //                     color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
            //                     width: 3,
            //                     shadowColor : '#fff', //默认透明
            //                     shadowBlur: 10
            //                 }
            //             },
            //             axisLabel: {            // 坐标轴小标记
            //                 textStyle: {       // 属性lineStyle控制线条样式
            //                     fontWeight: 'bolder',
            //                     color: '#fff',
            //                     shadowColor : '#fff', //默认透明
            //                     shadowBlur: 10
            //                 }
            //             },
            //             axisTick: {            // 坐标轴小标记
            //                 length :15,        // 属性length控制线长
            //                 lineStyle: {       // 属性lineStyle控制线条样式
            //                     color: 'auto',
            //                     shadowColor : '#fff', //默认透明
            //                     shadowBlur: 10
            //                 }
            //             },
            //             detail : {
            //                 width: 20,
            //                 height: 20,
            //                 offsetCenter: ['0', '-28'],       // x, y，单位px
            //                 textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            //                     color: '#fff',
            //                     fontSize: 18
            //                 }
            //             },
            //             data: [{value:pumpData[0].rtCnt}]
            //         }
            //     ]
            //
            // };
            //
            // pumpChart.setOption(pumpOption)

            // document.getElementById("pumpP").innerHTML = pumpData[0].hnnm;

            let pumpRightOption = {
                backgroundColor: '',
                // title: {
                //     text: "雨水泵站总台数为"+pumpData[1].allCnt+"台 "+" 当前开机"+pumpData[1].rtCnt+"台 "+" 开机总流量 "+pumpData[1].aFlow+"m³/s",
                //     left: 'center',
                //     textStyle: titleStyle
                // },
                tooltip : {
                    formatter: "{a} <br/>{b} : {c}台"
                },
                series: [
                    {
                        radius: 90,
                        endAngle: 0,
                        startAngle: 180,
                        center: ['50%', '90%'],
                        min: 0,
                        max: pumpData[1].allCnt,
                        splitNumber: 2,
                        name: '启用台数',
                        type: 'gauge',
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
                                width: 3,
                                shadowColor : '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        axisLabel: {            // 坐标轴小标记
                            textStyle: {       // 属性lineStyle控制线条样式
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor : '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length :15,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto',
                                shadowColor : '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        detail : {
                            width: 20,
                            height: 20,
                            offsetCenter: ['0', '-28'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#fff',
                                fontSize: 18
                            }
                        },
                        data: [{value:pumpData[1].rtCnt}]
                    }
                ]

            };


            pumpRightChart.setOption(pumpRightOption)
            document.getElementById("pumpRightp").innerHTML = pumpData[1].hnnm;
            document.getElementById("pumpRightWords1").innerHTML = `雨水泵站总台数为 <span>${pumpData[1].allCnt}</span> 台<br />当前开机 <span>${pumpData[1].rtCnt}</span> 台`;
            document.getElementById("pumpRightWords2").innerHTML = `开机总流量 <span>${pumpData[1].aFlow}</span> m³/s`;


            //积淹点信息
            let floodPointData = allData.flood.rtFlood.slice(0,5),xFloodPointData = [],yFloodPointData = [];
            for(let x in floodPointData){
                xFloodPointData.push(floodPointData[x].STNM.substring(0,12))
                yFloodPointData.push(floodPointData[x].VALUE)
            }
            let floodPointOption = {

                backgroundColor: "transparent",
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                xAxis: {
                    data: xFloodPointData,
                    axisLabel:{
                        color: "#000"
                    }
                },
                yAxis: {
                    name:"cm",
                    type: 'value'
                },
                series: [
                    {
                        name: '面平均雨量',
                        type: 'bar',
                        data: yFloodPointData,
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                    }
                ]
            }

            floodPointOption = newline(floodPointOption, 5, 'xAxis')

            floodPointChart.setOption(floodPointOption);


            //积淹点大饼
            let floodPointRightData = allData.flood.summary, floodPointRightDataArray = [],
                floodPointRightDataTitle = ['0-20', '20-30', '30-40', '40-50','>50' ];
            for (let y in floodPointRightData) {
                floodPointRightDataArray.push({value: floodPointRightData[y], name: floodPointRightDataTitle[y]})
            }
            let floodPointRightOption = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                title:{
                    text: "积水等级分布图",
                    textStyle: {
                        fontSize: 14
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    data: floodPointRightDataTitle
                },
                series: [
                    {
                        name: '积淹点',
                        type: 'pie',
                        radius: '50%',
                        center: ['45%', '60%'],
                        label:{
                            normal:{
                                show:true,
                                position:'right',
                                formatter: "{b} : {c} ({d}%)"
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function (val) {
                                    let name = val.name;
                                    if(name == '>50'){
                                        return "#ff3333";
                                    }else if(name == '40-50'){
                                        return "#ffcc00"
                                    }else if(name == '30-40'){
                                        return "#00c000"
                                    }else if(name == '20-30'){
                                        return "#007f80"
                                    }else{
                                        return "#99ffff";
                                    }


                                }
                            }
                        },
                        data: floodPointRightDataArray
                    }
                ]
            };

            floodPointRightChart.setOption(floodPointRightOption);

            //长江水位流量
            let datong = allData.datong,xaiguan = allData.xiaguan,ifMore,ifTall;
            Number(datong.compHisQ)>0?ifMore="多":ifMore="少";
            Number(xaiguan.compHis)>0?ifTall="高":ifTall="低";
            document.getElementById("waterLevelTop").innerHTML = `大通: 实时水位 <span>${datong.Z}m</span> 实时流量<span>${datong.Q/10000}万m³/s</span> 较常年同期偏<span>${ifMore}${Math.abs(Number(datong.compHisQ))}%</span>`;
            document.getElementById("waterLevelBottom").innerHTML = `下关: 实时潮位 <span>${xaiguan.Z}m</span> 较常年偏<span>${ifTall}${Math.abs(Number(xaiguan.compHis))}m</span>`

            let datong1 = [],datong2 = [], xiaguanData1 = [],waterTl = [];
            for(let z in allData.datong.process){
                waterTl.push(allData.datong.process[z].TM+"时");
                datong1.push(allData.datong.process[z].Z);
                datong2.push(allData.datong.process[z].Q/10000);
                xiaguanData1.push(allData.xiaguan.process[z].Z);
            }


            let waterLevelOption = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    bottom: '0',
                    data:['大通水位', '大通流量','下关潮位']
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'm',
                        min: Math.floor(datong1.concat(xiaguanData1).reduce(min)*.9),
                    },
                    {
                        type: 'value',
                        name: '万m³/s',
                        min: Math.floor(datong2.reduce(min)*.9)

                    }
                ],
                xAxis: {
                    data: waterTl
                },
                series: [
                    {
                        name: "大通水位",
                        type: "line",
                        data: datong1
                    },
                    {
                        name: "大通流量",
                        type: "line",
                        yAxisIndex: 1,
                        data: datong2,
                        itemStyle: {
                            normal: {
                                color: '#ffff00'
                            }
                        }
                    },
                    {
                        name: "下关潮位",
                        type: "line",
                        data: xiaguanData1,
                        itemStyle: {
                            normal: {
                                color: '#00c000'
                            }
                        }
                    }
                ]
            }

            waterLevelChart.setOption(waterLevelOption);

            //河道水位
            let waterChannelLegend = [],waterChannelx = [],waterChannelData = [],waterAllData = [],waterChannelColor = ['#F16A65','#ffff00', '#00c000', '#3C7297']
            for(let e in allData.impRiver){
                waterChannelLegend.push(allData.impRiver[e].STNM)
                let temWaterChannel = []
                for(let f in allData.impRiver[e].process){
                    if(e === 0){
                        waterChannelx.push(allData.impRiver[e].process[f].TM)
                    }
                    temWaterChannel.push(allData.impRiver[e].process[f].Z)
                    if(allData.impRiver[e].process[f].Z != null){
                        waterAllData.push(allData.impRiver[e].process[f].Z)
                    }
                }

                waterChannelData[e] = {
                    name: allData.impRiver[e].STNM,
                    type: "line",
                    data: temWaterChannel,
                    itemStyle: {
                        normal: {
                            color: waterChannelColor[e]
                        }
                    }
                }
            }

            let waterChannelChartOption = {
                backgroundColor: "transparent",
                title: {
                    text: '河道水位',
                    left: 'center',
                    textStyle: titleStyle
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    bottom: '0',
                    data: waterChannelLegend
                },
                xAxis: {
                    data: waterChannelx
                },
                yAxis: {
                    type: 'value',
                    name: 'm',
                    min: Math.floor(waterAllData.reduce(min)*.9).toFixed(1),
                },
                series: waterChannelData
            }

            waterChannelChart.setOption(waterChannelChartOption);



            //水库水位

            let reservoirData = allData.impRsvr,reservoirDatax = [], reservoirDatay = [], reservoirWarn = [];
            for(let xx in reservoirData){
                reservoirDatax.push(reservoirData[xx].STNM.replace(/水库/,""));
                reservoirDatay.push(reservoirData[xx].Z);
                reservoirWarn.push(reservoirData[xx].WRZ);
            }
            let reservoirOption = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c}m<br />'
                },
                xAxis: {
                    data: reservoirDatax,

                },
                yAxis: {
                    name:"m",
                },
                series: [
                    {
                        name: "中型水库水位",
                        type:'bar',
                        label:{
                            normal:{
                                show:true,
                                position:'top'
                            }
                        },
                        itemStyle:{
                            normal:{
                                color: function (val) {
                                    if(val.value >= reservoirWarn[val.dataIndex]){
                                        return "#fc9c13"
                                    }else{
                                        return "#17a6ca"
                                    }
                                }
                            }
                        },
                        data: reservoirDatay
                    }
                ]
            }

            let newReservoirOption = newline(reservoirOption, 4, 'xAxis')

            reservoirChart.setOption(newReservoirOption);

            //水库总数饼图
            let alertCircleData = allData.alert.rsvr, alertCircleArr = [];
            alertCircleArr.push({
                name:"超汛限水库",
                value: alertCircleData.alertNum,
                selected:true
            })
            alertCircleArr.push({
                name:"正常水库",
                value: alertCircleData.total - alertCircleData.alertNum
            })
            let alertCircleOption = {
                backgroundColor: "transparent",

                series:[
                    {
                        name: '水库情况',
                        type: 'pie',
                        radius : '50%',
                        center: ['50%', '65%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}'
                            }
                        },
                        data: alertCircleArr

                    }
                ]
            };


            alertCircleChart.setOption(alertCircleOption)


            //1

            let alertCircleData1 = allData.alert.rain, alertCircleArr1 = [];
            alertCircleArr1.push({
                name:"超警戒点",
                value: alertCircleData1.alertNum,
                selected:true
            })
            alertCircleArr1.push({
                name:"正常点",
                value: alertCircleData1.total - alertCircleData1.alertNum
            })
            let alertCircleOption1 = {
                backgroundColor: "transparent",

                series:[
                    {
                        name: '雨强情况',
                        type: 'pie',
                        radius : '50%',
                        center: ['50%', '65%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}'
                            }
                        },
                        data: alertCircleArr1

                    }
                ]
            };


            alertCircleChart1.setOption(alertCircleOption1)


            //2

            let alertCircleData2 = allData.alert.river, alertCircleArr2 = [];
            alertCircleArr2.push({
                name:"超警戒点",
                value: alertCircleData2.alertNum,
                selected:true
            })
            alertCircleArr2.push({
                name:"正常点",
                value: alertCircleData2.total - alertCircleData2.alertNum
            })
            let alertCircleOption2 = {
                backgroundColor: "transparent",

                series:[
                    {
                        name: '河道水位情况',
                        type: 'pie',
                        radius : '50%',
                        center: ['50%', '65%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}'
                            }
                        },
                        data: alertCircleArr2

                    }
                ]
            };


            alertCircleChart2.setOption(alertCircleOption2)


            //3

            let alertCircleData3 = allData.alert.flood, alertCircleArr3 = [];
            alertCircleArr3.push({
                name:"超警戒点",
                value: alertCircleData3.alertNum,
                selected:true
            })
            alertCircleArr3.push({
                name:"正常点",
                value: alertCircleData3.total - alertCircleData3.alertNum
            })
            let alertCircleOption3 = {
                backgroundColor: "transparent",

                series:[
                    {
                        name: '河道水位情况',
                        type: 'pie',
                        radius : '50%',
                        center: ['50%', '65%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}'
                            }
                        },
                        data: alertCircleArr3

                    }
                ]
            };


            alertCircleChart3.setOption(alertCircleOption3)



        })





}

//等值面
class Isosurface extends React.Component{
    constructor(props){
        super(props)
    }

    componentWillReceiveProps(nextProps){

    }
    render(){
        let imgUrl, imgLel = this.props.info.lelve,levelGroup = [];
        if(this.props.info.success){
            this.props.info.bg?imgUrl = this.props.info.imgurl.replace(/http:\/\/10.32.224.49/,window.httpAddress):true;
        }else{
            imgUrl = window.httpAddress+":8181/isocreator/blnlib/njfx2.png";
        }
        for(let i in imgLel){
            levelGroup.push(
                <div className="lvlItem" key={i}>
                    <span style={{background: imgLel[i].color}}></span>
                    {imgLel[i].value}
                </div>
            )
        }
        return(
            <div className="isosurface">
                <div className="selfTitle">三日降雨等值面图</div>
                <img src={imgUrl} alt="" />
                <div className="lvlWrap">
                    {levelGroup}
                </div>
            </div>
        )
    }

}



//河道水位
// class WaterChannel extends React.Component{
//     constructor(props){
//         super(props);
//     }
//     componentWillReceiveProps(nextProps){
//
//     }
//     render(){
//         let waterInfo = [];
//         for(let i in this.props.info){
//             if(i < 5){
//                 waterInfo.push(
//                     <tr key={i}>
//                         <td className="waterInfo1">{this.props.info[i].STNM}</td>
//                         <td>{this.props.info[i].Z}</td>
//                         <td>{this.props.info[i].WRZ}</td>
//                         <td>{this.props.info[i].HISHIGHEST}</td>
//                         <td>{this.props.info[i].hisOrder}</td>
//                     </tr>
//                 )
//             }
//
//         }
//         return(
//             <div className="waterChannel">
//                 {waterInfo?(
//                     <table>
//                         <thead>
//                         <tr>
//                             <th>站点名称</th>
//                             <th>实时水位(m)</th>
//                             <th>警戒水位(m)</th>
//                             <th>历史最高水位(m)</th>
//                             <th>历史同期排名</th>
//                         </tr>
//                         </thead>
//                         <tbody>
//                         {waterInfo}
//                         </tbody>
//                     </table>
//                 ):(
//                     <div></div>
//                 )}
//
//             </div>
//         )
//     }
// }


//气象信息
let week = ["今天","明天","后天","大后天"];
class Weather extends React.Component{
    constructor(props) {
        super(props);

    }
    componentWillReceiveProps(nextProps){

    }
    render(){
        let weatherInfo = this.props.info,weatherArr = [];
        for(let i in weatherInfo){
            if(i <= 3){
                let temImg;
                weatherInfo?temImg = "iconfont icon-"+weatherInfo[i].icon:true;
                weatherArr.push(
                    <div className="fl weatherItem" key={i}>
                        <div className="weatherTitle">{week[i]}</div>
                        <div className="textCenter weatherMid">
                            <p>
                                <i className={temImg}></i>
                            </p>

                            {weatherInfo[i].weather12h?weatherInfo[i].weather12h:"多云"}
                        </div>
                        <div className="textCenter weatherBottom">
                            {weatherInfo[i].minTemp24h}℃ / {weatherInfo[i].maxTemp24h}℃
                        </div>
                    </div>
                )
            }

        }
        return(
            <div className="mt10 weatherArea">
                {weatherInfo?(
                    <div>
                        <div className="clearfix">
                            {weatherArr}
                        </div>

                        <div className="weatherSource">来源: 市气象局</div>
                    </div>


                ):(
                    <div className="clearfix">
                    </div>
                )}
            </div>
        )
    }
}

//降雨信息上
class RainTop extends React.Component{
    constructor(props) {
        super(props);
    }
    componentWillReceiveProps(nextProps){

    }
    render(){
        let rainTopData = this.props.info,ifMore;
        if(rainTopData){
            Number(rainTopData.percent) > 0?ifMore = "多":ifMore = "少";
        }
        return(
            <div className="rainTop">

                {rainTopData?(
                    <div>
                        <div className="clearfix textCenter selfGraphic">
                            <div className="fl rainTopItem">
                                <div className="rainh">
                                    {rainTopData.TVALUE}mm
                                </div>
                                今日降雨量
                            </div>
                            <div className="fl rainTopItem rainTopItemMid">
                                <div className="rainh">
                                    {rainTopData.YVALUE}mm
                                </div>
                                昨日降雨量
                            </div>
                            <div className="fr rainTopItem">
                                <div className="rainh">
                                    {rainTopData.TTVALUE}mm
                                </div>
                                三日降雨量
                            </div>
                        </div>
                        <div className="weatherSummary">
                            入汛以来降雨总量: <span>{rainTopData.floodTotal}</span>mm, 比历史同期偏<span>{ifMore}{Math.abs(rainTopData.percent)}%</span>
                        </div>
                    </div>
                ):(
                    <div></div>
                )}
            </div>


        )
    }
}



let allPos1 = {
    totalWrap: {},
    mainWrap: {},
    mapArea: {},
    waterLevelWrap: {},
    waterChannelWrap:{},
    pumpWrap:{},
    emergencyWrap: {},
    dangerWrap:{},
    reservoirWrap: {},
    similarFlood: {}
};
let map;

let icon1 = L.icon({
    iconUrl: 'images/legend/1.gif',
    iconSize:     [20, 20],
});
let icon2 = L.icon({
    iconUrl: 'images/legend/2.gif',
    iconSize:     [20, 20],
});
let icon3 = L.icon({
    iconUrl: 'images/legend/3.gif',
    iconSize:     [20, 20],
});
let icon4 = L.icon({
    iconUrl: 'images/legend/4.gif',
    iconSize:     [20, 20],
});

localStorage.removeItem('allPos1')
if(localStorage.getItem('allPos1')){

}else{
    localStorage.setItem('allPos1',JSON.stringify(allPos1))
}





class Qhh extends React.Component {
    constructor(props) {
        super(props);
        this.state ={
            loading: true,
            isoData:{},
            channelData:{},
            allPos: allPos1
        };

    }

    componentDidMount = () => {
        try{
            this.setState({
                allPos: JSON.parse(localStorage.getItem('allPos1'))
            })
        }catch(err){

        }

        map = L.map('map', { zoomControl:false }).setView(position, 10);
        let self = this
        getData(self,map);
        setInterval(function () {
            getData(self,map);
        },300000);
        map.dragging.disable();
        map.touchZoom.disable();

        map.doubleClickZoom.disable();

        map.scrollWheelZoom.disable();

        // L.marker([31.72663, 119.05920], {icon: icon1}).addTo(map);

        L.esri.tiledMapLayer({
            // url: 'http://10.32.224.54:6080/arcgis/rest/services/%E5%8D%97%E4%BA%AC%E6%B0%B4%E5%8A%A1%E5%B1%80%E7%94%B5%E5%AD%90%E5%9C%B0%E5%9B%BE/%E7%A7%A6%E6%B7%AE%E6%B2%B3%E6%B5%81%E5%9F%9F%E9%AB%98%E4%BA%AE%E5%9C%B0%E5%9B%BE/MapServer',
            url: 'http://122.227.159.86:6080/arcgis/rest/services/%E5%8D%97%E4%BA%AC%E9%98%B2%E6%B1%9B/%E7%A7%A6%E6%B7%AE%E6%B2%B3%E6%B5%81%E5%9F%9F%E9%AB%98%E4%BA%AE%E5%9C%B0%E5%9B%BE102100/MapServer',
            maxZoom: 15,
            minZoom: 7,
            attribution: '&copy; 2017 弘泰水利'
        }).addTo(map);




        // L.marker([ 32.04, 118.78 ]).addTo(map).bindPopup(
        // '宁波').openPopup();

        // let nbMarker = L.circleMarker([32.04, 118.78], {
        //     radius: 4,
        //     fillColor: 'red',
        //     fillOpacity: 1,
        //     stroke: true,
        //     color: 'black',
        //     weight: 2
        // }).addTo(map);


    }


    handleStop = (e,data)=> {
        let target = document.getElementById(data.node.id);
        let changePos = JSON.parse(localStorage.getItem('allPos1'))
        for(let ii in changePos){
            if(ii == data.node.id){
                changePos[ii] = {}
                changePos[ii].left = target.offsetLeft + data.x;
                changePos[ii].top = target.offsetTop + data.y;
            }
        }
        localStorage.setItem('allPos1',JSON.stringify(changePos));

    }

    render() {

        return(
            <Spin spinning={this.state.loading} tip="加载中...">
                <div className="mainWrap qhh">
                    <div className="pageTitle">
                        南京市秦淮河大数据分析平台(2017-06-9 11时--2017-06-11 11时)
                    </div>
                    <div className="pageHome qhh">
                        <Draggable onStop={this.handleStop}>
                            <div className="mapArea" id="mapArea">
                                {/*<div className="mapLegend">*/}
                                {/*<div className="mapLegendItem">*/}
                                {/*<img src="images/legend/1.png" alt=""/>*/}
                                {/*雨强(1小时雨量大于16.7mm)*/}
                                {/*</div>*/}
                                {/*<div className="mapLegendItem">*/}
                                {/*<img src="images/legend/2.png" alt=""/>*/}
                                {/*河道水位超警戒*/}
                                {/*</div>*/}
                                {/*<div className="mapLegendItem">*/}
                                {/*<img src="images/legend/3.png" alt=""/>*/}
                                {/*中型水库水位超汛限*/}
                                {/*</div>*/}
                                {/*<div className="mapLegendItem">*/}
                                {/*<img src="images/legend/4.png" alt=""/>*/}
                                {/*积水大于20cm*/}
                                {/*</div>*/}
                                {/*</div>*/}
                                <div id="map" style={mapStyle}></div>
                                <div className="allCircles">
                                    <div className="circlePic">
                                        <div className="lvlItem">
                                            <span style={{background: '#F16A65'}}></span>
                                            超警戒点
                                        </div>
                                        <div className="lvlItem">
                                            <span style={{background: '#759FA7'}}></span>
                                            正常点点
                                        </div>
                                    </div>
                                    <div className="clearfix">
                                        <div className="alertCircleWrap fl alertCircleWrap">
                                            <div className="selfTitle">
                                                <img src="images/legend/1.png" alt=""/>
                                                雨强(1小时雨量大于16.7mm)
                                            </div>
                                            <div id="alertCircle1" className="singleAlertCircle"></div>
                                        </div>
                                        <div className="alertCircleWrap1 fl alertCircleWrap">
                                            <div className="selfTitle">
                                                <img src="images/legend/2.png" alt=""/>
                                                河道水位超警戒
                                            </div>
                                            <div id="alertCircle2" className="singleAlertCircle"></div>
                                        </div>
                                    </div>
                                    <div className="clearfix">
                                        <div className="alertCircleWrap2 fl alertCircleWrap">
                                            <div className="selfTitle">
                                                <img src="images/legend/3.png" alt="" />
                                                水库水位超汛限
                                            </div>
                                            <div id="alertCircle" className="singleAlertCircle"></div>
                                        </div>
                                        <div className="alertCircleWrap3 fl alertCircleWrap">
                                            <div className="selfTitle">
                                                <img src="images/legend/4.png" alt=""/>
                                                积水大于20cm
                                            </div>
                                            <div id="alertCircle3" className="singleAlertCircle"></div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </Draggable>
                        {/*气象信息*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="total graphic selfGraphic" id="totalWrap" >
                                <div className="selfTitle">
                                    气象信息
                                </div>
                                <Weather info={this.state.weather} />
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*降雨信息*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="rain graphic qhhRain" id="mainWrap">
                                <div className="selfTitle">
                                    降雨信息
                                </div>
                                <RainTop info={this.state.njRain} />
                                <div className="clearfix textCenter">
                                    {/*<div id="rain" className="fl"></div>*/}
                                    <Isosurface info={this.state.isoData} />
                                </div>
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*长江水位流量*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic waterLever" id="waterLevelWrap">
                                <div className="selfTitle">
                                    长江水位流量
                                </div>
                                <p id="waterLevelTop"></p>
                                <p id="waterLevelBottom"></p>
                                <div id="waterLevel"></div>
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*河道水位*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic waterChannel" id="waterChannelWrap">
                                <div className="selfTitle">
                                    河道水位
                                </div>
                                {/*<WaterChannel info={this.state.channelData} />*/}
                                <div id="waterChannel"></div>
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*泵站工情*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="pump graphic" id="pumpWrap">
                                <div className="selfTitle">
                                    雨水泵站工情统计
                                </div>
                                <div className="subTitle">
                                    泵站信息
                                </div>
                                <div className="clearfix">
                                    {/*<div className="fl">*/}
                                    {/*<p id="pumpP"></p>*/}
                                    {/*</div>                                       */}
                                    <div id="pump" className="hide"></div>
                                    <p id="pumpP" className="hide"></p>
                                    <div className="pumpRightWrap">
                                        <div id="pumpRightWords1"></div>
                                        <div id="pumpRightWords2"></div>
                                        <div id="pumpRight"></div>
                                        <p id="pumpRightp"></p>
                                    </div>
                                </div>
                                <div className="floodPointWrap">
                                    <div className="subTitle">
                                        积淹点信息
                                    </div>
                                    <div className="clearfix qhhRightTopPos">
                                        <div id="floodPoint"></div>
                                        <div id="floodPointRight"></div>
                                    </div>

                                </div>
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic reservoir" id="reservoirWrap">
                                <div className="selfTitle">
                                    中型水库水位
                                </div>
                                <div className="reservoirLegend">
                                    <div className="lvlItem">
                                        <span style={{background: "#fc9c13"}}></span>
                                        水库超汛限
                                    </div>
                                    <div className="lvlItem">
                                        <span style={{background: "#17a6ca"}}></span>
                                        水库未超汛限
                                    </div>
                                </div>
                                <div id="reservoir"></div>
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*险情信息*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic danger dangerRightBottom hide" id="dangerWrap">
                                <div className="selfTitle">险情信息</div>

                                <div className="graphicRight"></div>
                                <div className="graphicLeft"></div>
                            </div>
                        </Draggable>

                        {/*相似洪水分析*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic danger floodRightAna" id="similarFlood">
                                <FloodInfo />
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                    </div>
                </div>
            </Spin>
        )
    }
}

export default Qhh;
